<template>
  <div class="search">
    <input type="text" :placeholder="placeholder" :maxlength="maxlength" v-model="keyword" @input="search()">
  </div>
</template>

<script>
import { ref, watch } from 'vue'
import { useStore } from 'vuex'
import { formateUserDate } from '@/libs/utils.js'
import  getData  from '@/services/index.js'
export default {
  props:{
    placeholder: String,
    maxlength: Number
  },
  setup(props) {  //接收props
    const keyword = ref('')
    const store = useStore()

    const search = () => {
      const field = store.state.field
      if (keyword.value.length === props.maxlength) {
        getData(store, field, formateUserDate(keyword.value))
      }
    }

    watch(
      () => store.state.field,
      () => {
        keyword.value = ''
      }
    )
    return {
     keyword,
     search
    }
  }
}
</script>

<style lang="less" scoped>
.search{
  position: fixed;
  top: .44rem;
  left: 0;
  z-index: 99;
  width: 100%;
  background-color: #fff;
  height: .38rem;
  padding: .03rem .1rem;
  box-sizing: border-box; //包括边框（防止距离超出了）
  input{
    width: 100%;
    height: 100%;
    font-size: .14rem;  //设置光标的大小
    border: 1px solid #ddd;
    text-indent: .1rem;
    border-radius: .03rem;
    &:focus{
      border-color: #ed4040;
      box-shadow: 0 0 .03rem #ed4040;
      transition: all 0.3s;
    }
  }
}
</style>